<template>
  <div class="full-width">
    <div
      id="header"
      :style="{'background-image': 'url(' + state.detail.coverImg + ')','background-repeat':'no-repeat','background-size':'cover'}"
      class="spy-15 min-width-130">
      <div class="width-130 mx-auto">
        <p class="text-orange text-80">{{state.detail.name}}</p>
        <p class="text-orange text-80">.</p>
        <p class="text-gray text-24">Kupo Technology</p>
      </div>
    </div>
    <div class="flex-column sp_m mx-auto width-130 px-16 pt-15 pb-38 bg-gray-light3 rounded-15">
      <div class="flex_between_start mb-10">
        <img class="width-22" :src="state.detail.logo" alt="">
        <a target="_blank" class="text-black" :href="linkUrl">{{state.detail.link}}</a>
      </div>
      <div v-html="state.detail.rockTextDesc" class="mb-6"></div>
    </div>
    <div
      class="width-130 height-46 d-flex mx-auto my-40 rounded-5 of-hidden"
    >
      <div
        :style="{'background-image': 'url(' + state.detail.otherImg + ')','background-repeat':'no-repeat','background-size':'cover'}"
        class="height-46 width-46 border border border-color-white rounded-5 of-hidden"></div>
      <div
        :style="{'background-image': 'url(' + state.detail.otherImg + ')','background-repeat':'no-repeat','background-size':'cover', 'background-position' : '-433px'}"
        class="height-46 width-46 border border border-color-white rounded-5 of-hidden"></div>
      <div
        :style="{'background-image': 'url(' + state.detail.otherImg + ')','background-repeat':'no-repeat','background-size':'cover', 'background-position' : '-865px'}"
        class="height-46 width-46 border border border-color-white rounded-5 of-hidden"></div>
    </div>
    <ContactUs/>
    <CommonFooter/>
  </div>
</template>

<script setup>
import CommonFooter from '@/components/CommonFooter.vue'
import ContactUs from '@/components/contactUs.vue'
import Icon from '@/assets/images/Innovative-Financeneilogo.png'
import { onMounted, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import userStore from '@/store/index'
import urls from '@/api/index'

const router = useRouter()

const state = reactive({
  id: router.currentRoute.value.query.id,
  detail: {}
})
watch(() => router.currentRoute.value.query.id, (newVal) => {
  state.id = newVal
  getDetail()
  const header = document.getElementById('header')
  header.scrollIntoView()
})
watch(() => userStore.state.lang, () => {
  getDetail()
})
const getDetail = () => {
  userStore.commit('CHANGELOAD', true)
  const params = {
    id: state.id,
    lang: userStore.state.lang
  }
  urls.home.getModuleData(params)
    .then(res => {
      state.detail = res.data
      userStore.commit('CHANGELOAD', false)
    })
    .catch(err => {
      userStore.commit('CHANGELOAD', false)
      ElMessage.error(err.msg)
    })
}
onMounted(() => {
  getDetail()
  const header = document.getElementById('header')
  header.scrollIntoView()
})
</script>

<style lang="scss">
.bg_img {
  background-size: cover;
}
.item_bg{
  background: url("@/assets/images/honor_bg.png") no-repeat;
  background-size: cover;
}
.sp_m{
  margin-top: -120px;
  p{
    font-size: 18px
  }
}
.out:hover img{
  transform: scale(1.1);
}
.out img{
  transition: all .5s ease;
  object-fit: cover;
}

.content{
  width:100%;
  height: 40px;
  margin-bottom: 32px;
  font-size: 14px;
  color: #555;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  word-break:break-all;
}
.vertical-line {
  width: 2px;
  height: 100px;
  background: #ff5a2d;
  position: absolute;
  top: 320px;
  left: 40px;
  z-index: 888;
}
.news-item:hover{
  color: #fff;
  background: #222!important;
  img{
    filter: blur(5px);
  }
  p{
    color: #fff;
  }
}
.hoverbtn:hover{
  background: #333;
  color: #fff;
  border: none;
}
</style>
